<template>
  <el-form :model="formData" :rules="formRules" class="page-form" ref="formRef">
    <el-form-item :label="t('continueSign')" prop="continue_sign">
      <el-input class="input-width" v-model.trim="formData.continue_sign" clearable /><span
        class="ml-[10px]"
        >{{ t('day') }}</span
      >
    </el-form-item>
    <el-form-item :label="t('continueSign')">
      <div>
        <div v-for="(item, index) in gifts" :key="index" class="mb-[15px]">
          <component
            :is="item.component"
            v-model="formData[item.key]"
            ref="giftRefs"
            v-if="item.component"
          />
        </div>
      </div>
    </el-form-item>
    <el-form-item :label="t('receiveLimit')" prop="receive_num">
      <div>
        <el-radio
          class="mb-[15px]"
          v-model="formData.receive_limit"
          :label="1"
          @change="radioChange($event, 1)"
          >{{ t('noLimit') }}</el-radio
        >
        <div class="flex">
          <el-radio
            class="!mr-[15px]"
            v-model="formData.receive_limit"
            :label="2"
            @change="radioChange($event, 2)"
            >{{ t('everyOneLimit') }}</el-radio
          >
          <el-input class="input-width" v-model="formData.receive_num" clearable /><span
            class="ml-[10px]"
            >{{ t('time') }}</span
          >
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { t } from '@/lang'
import { ref, reactive, defineAsyncComponent, computed, watch } from 'vue'
import { FormRules } from 'element-plus'
import { getGiftDict } from '@/views/app/api/member'
import { guid } from '@/utils/common'
import Test from '@/utils/test'

const gifts = ref({})
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const emits = defineEmits(['update:modelValue'])
const formData = ref({
  continue_sign: 0,
  continue_tag: guid(),
  receive_limit: 1,
  receive_num: 0
})

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emits('update:modelValue', value)
  }
})
const giftRefs = ref([])

watch(
  () => value.value,
  (nval, oval) => {
    if ((!oval || !Object.keys(oval).length) && Object.keys(nval).length) {
      formData.value = value.value
    }
  },
  { immediate: true }
)

watch(
  () => formData.value,
  () => {
    value.value = formData.value
  },
  { deep: true }
)

const modules: any = import.meta.glob('@/**/*.vue')
let data = {
  balance: {
    key: 'balance',
    name: '送红包',
    desc: '发放红包',
    component: '/src/views/app/views/member/components/gift-balance.vue',
    grant: {
      driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
    },
    content: {
      admin: {
        driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
      },
      member_level: {
        driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
      },
      member_sign: {
        driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
      },
      member_sign_continue: {
        driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
      }
    }
  },
  point: {
    key: 'point',
    name: '送积分',
    desc: '发放积分',
    component: '/src/views/app/views/member/components/gift-point.vue',
    grant: {
      driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
    },
    content: {
      admin: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_level: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_sign: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_sign_continue: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      }
    }
  },
  growth: {
    key: 'growth',
    name: '送成长值',
    desc: '发放成长值',
    component: '/src/views/app/views/member/components/gift-growth.vue',
    grant: {
      driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
    },
    content: {
      admin: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_level: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_sign: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_sign_continue: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      }
    }
  },
  shop_coupon: {
    key: 'shop_coupon',
    name: '优惠券',
    desc: '发放优惠券',
    component: '/src/views/addon/shop/views/member/components/gift-coupon.vue',
    grant: {
      driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
    },
    content: {
      admin: {
        driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
      },
      member_level: {
        driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
      },
      member_sign: {
        driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
      },
      member_sign_continue: {
        driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
      }
    }
  }
}

Object.keys(data).forEach((key: string) => {
  console.log(data[key].component)

  data[key].component && (data[key].component = defineAsyncComponent(modules[data[key].component]))
})
gifts.value = data
// getGiftDict().then(({ data }) => {
//   Object.keys(data).forEach((key: string) => {
//     data[key].component &&
//       (data[key].component = defineAsyncComponent(modules[data[key].component]))
//   })
//   gifts.value = data
// })

const formRef = ref(null)
// 表单验证规则
const formRules = reactive<FormRules>({
  continue_sign: [
    { required: true, message: t('continueSignPlaceholder'), trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: Function) => {
        if (!Test.digits(formData.value.continue_sign)) {
          callback('连续签到格式错误')
        } else if (formData.value.continue_sign <= 0) {
          callback('连续签到不能小于等于0')
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  receive_num: [
    { required: true, message: t('receiveNumPlaceholder'), trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: Function) => {
        if (formData.value.receive_limit == 2) {
          if (Test.empty(formData.value.receive_num)) {
            callback('请输入限领次数')
          }
          if (!Test.digits(formData.value.receive_num)) {
            callback('限领次数格式错误')
          }
          if (formData.value.receive_num <= 0) {
            callback('限领次数不能小于等于0')
          }
          callback()
        } else {
          callback()
        }
      }
    }
  ]
})

const verify = async () => {
  let verify = true
  for (let i = 0; i < giftRefs.value.length; i++) {
    const item = giftRefs.value[i]
    !(await item.verify()) && (verify = false)
  }
  await formRef.value?.validate((valid) => {
    verify = valid
  })
  return verify
}

const radioChange = (val, key) => {
  formData[key] = val
}

defineExpose({
  verify
})
</script>

<style lang="scss" scoped>
.input-width {
  width: 100px;
}
</style>
